<template>
	<view>
		<u-navbar :is-back="false" title="我的" :background="{backgroundColor:'#E62131'}"
			title-color="#ffffff"></u-navbar>
		<view class="toplistad fliexs">
			<view class="topheader fliexs" v-if="userInfo">
				<u-image width="90rpx" height="90rpx" @click="tomedetss" :src="userInfo.headImg"
					shape="circle"></u-image>
				<div class="names">
					<view class="">
						{{userInfo.nickName}}
					</view>

				</div>
			</view>
		</view>
		<view class="centerss" v-if="userInfo">
			<view class="all_cards cardlist fles">
				<div class="listscenter fliexs space_between">
					<view class="lefts">
						<span>手机</span>
					</view>
					{{userInfo.phone1}}

				</div>
				<div class="listscenter fliexs space_between">
					<view class="lefts">
						<span>职位</span>
					</view>
					{{userInfo.userName}}

				</div>
				<button type="default" open-type="contact">
					<div class="listscenter fliexs space_between" style="border: none;">
						<view class="lefts">
							<span>校区</span>
						</view>
						{{userInfo.campusName}}
					</div>
				</button>

			</view>
		</view>

	<view class="tuichusa" @click="outLogn">
		退出登录
	</view>
	</view>
</template>

<script>
	import staticUrl from "@/common/config.js"
	export default {
		data() {
			return {
				action: staticUrl.staticUrl,
				header: {
					accessToken: 'bearer ' + uni.$func.cache("token"),
				},
				userInfo: null,
				src: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
			}
		},

		onLoad(options) {
			this.usersgetUserInfoApi()
		},
		onShow() {

		},
		onReachBottom() {},
		methods: {
			outLogn(){
				uni.clearStorageSync();
				uni.reLaunch({
					url: '../index/index'
				})
			},
			usersgetUserInfoApi() {
				uni.$api.common.userscurrent().then((res) => {
					this.userInfo = res.result
				});
			},
			topages(url) {
				uni.navigateTo({
					url: './collectList'
				})
			},
			tomedetss() {
				// 项目实战中使用
				let _this = this;
				uni.chooseImage({
					count: 1, // 图片数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths[0])
						_this.logo_list = tempFilePaths[0]
						uni.uploadFile({
							url: _this.action, //上传图片api
							filePath: tempFilePaths[0],
							header: _this.header,
							success: (res) => {
								let obgs = JSON.parse(res.data)
								uni.$api.common.userseditInfo({
									headImg: obgs.result.path,
									id: _this.userInfo.id
								}).then((resso) => {
									uni.showToast({
										title: "上传成功",
										icon: "success"
									})
									setTimeout(() => {
										_this.usersgetUserInfoApi()
									}, 1000)
								});

							}
						});
					}
				});
			}
		}
	}
</script>
<style scoped>
	button::after {
		border: 0;
	}

	button {
		background: none !important;
		line-height: normal;
		padding: 0;
		margin: 0;
		color: #ffffff;
		text-align: left;
	}
</style>
<style lang="scss">
	.toplistad {
		height: 200rpx;
		background-color: #E62131;
		padding: 0 40rpx;

		.topheader {
			.images {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.names {
				padding-left: 30rpx;
				color: #ffffff;
				font-weight: 600;
				font-size: 38rpx;
			}
		}
	}

	.centerss {
		padding: 30rpx;
	}

	.listads {
		background-color: #ffffff;
		position: relative;
		top: -55rpx;
		left: 0;
		right: 0;
		padding: 20rpx 50rpx;

		.listcenter {
			text-align: center;

			.imgadfs {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.cardlist {
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.titles {
			font-weight: bold;
			font-size: 30rpx;
			margin-top: 30rpx;
		}

		.textcet {
			padding: 10rpx 0;
		}

		.cityopt {
			display: flex;

			.rightcity {
				.cityname {
					font-size: 34rpx;
				}

				.details {
					font-size: 28rpx;
					color: #D2CCCC;
				}
			}
		}

		.dates {
			color: #707070;
			display: flex;
			align-items: center;
			padding: 0 20rpx 0;
			padding-top: 20rpx;

			.spans {
				padding-left: 5rpx;
			}
		}

		.dalist {
			color: #707070;
			display: flex;
			align-items: center;
			padding: 0 20rpx 0;
			padding-top: 20rpx;

			.testone {
				padding: 0 5px;
			}

			.prices {
				color: #000000;
			}
		}
	}

	.borders {
		width: 100%;
		margin: 30rpx 0;
		height: 1rpx;
		background-color: #D7D7D7;
	}

	.fles {
		position: relative;
		left: 0;
		right: 0;
		top: -20rpx;

		.listscenter {
			border-bottom: 1rpx solid #E9E9E9;
			font-size: 32rpx;
			padding: 20rpx 0;

			.lefts {
				color: #707070;
				display: flex;
				align-items: center;

				.imsc {
					margin-right: 10rpx;
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
	}
	.tuichusa{
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: 1rpx solid #e1e1e1;
		background-color: #E62131;
		border-radius: 50rpx;
		color: #ffffff;
		margin: 100rpx auto 0;
	}
</style>